import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Modal, Form, Input, Select } from 'antd';
import _ from 'lodash';
import UserSelect from './UserSelect';
const { Option } = Select;
const { TextArea } = Input;
const FormItem = Form.Item;
const formItemLayout = {
  labelCol: {
    span: 7,
  },
  wrapperCol: {
    span: 15,
  },
};

@connect(({ project, version,jira, loading }) => ({
  ...jira,
  status: project.status,
  isCheck: project.isCheck,
  loading: loading.models.testcenter_project,
}))
  export default Form.create()(
    class extends React.Component {

      handleCancel = () => {
        this.props.dispatch({
          type: 'project/setFormModalVisible',
          payload: false
        })
        this.props.form.resetFields();
      };

      handleOK = (e) => {
        const form = this.props.form;
        form.validateFields((err, values) => {
          if (err) {
            return;
          }
          if (!err) {
            let actionType = this.configActionType(this.props.status);
            this.props.dispatch({
              type: `${actionType}`,
              payload: { ...values },
            })
          }
          this.props.form.resetFields();
        });
      };

      configActionType(status) {
        let actionType = (status == 1 ? 'project/create' : (status == 2 ? 'project/edit' : ''));
        return actionType;
      }

      configTitle = (status) => {
        let title = status == 2 ? '编辑项目' : (status == 1 ? "新建项目" : (status == 3 ? "查看项目" : ''));
        return title;
      }

      configFormModalEnanble = (status) => {
        return status == 3 ? true : false; 
      }

      getProjectNameList = (data) =>{
        let list = data.map(r=> <Option key={r.projectname} >{r.projectname}</Option>)
        return list
      }
      render() {
        let { data, status,bug } = this.props;
        let title = this.configTitle(status);
        let formModalDisable = this.configFormModalEnanble(status);
        const { getFieldDecorator } = this.props.form;

        return (
          <Modal
            visible
            title={title}
            okText="确定"
            cancelText={formModalDisable ? "关闭":"取消"}
            destroyOnClose={true}
            onCancel={this.handleCancel}
            onOk={this.handleOK}
            width={595}
            okButtonProps={{ disabled: formModalDisable, style:{ display: formModalDisable ?"none":"inline"},}}
          >
            <Form layout="vertical"  >
              {(status == 2 || status == 3) ? (
                <FormItem {...formItemLayout}>
                  {
                    getFieldDecorator('id', {
                      rules: [{ required: true }],
                      initialValue: data.id || 0
                    })
                      (<Input type="hidden" />)
                  }
                </FormItem>
              ) : null
              }
              <FormItem {...formItemLayout} label="项目名称">
                {getFieldDecorator('name', {
                  rules: [{ required: true, message: '请填写项目名称!' }],
                  initialValue: data.name
                })( <Select placeholder= "请选填写目名称">
                      {this.getProjectNameList(bug.projectNameAndId)}
                    </Select>)}
              </FormItem>
              <Form.Item {...formItemLayout} label="测试">
                {getFieldDecorator('tester', {
                  rules: [{ required: false, message: '【测试】不能为空' }]
                })(
                  <UserSelect roleId={3} holder="请选择对应的测试同学" users={data.tester} disabled={formModalDisable}/>
                )}
              </Form.Item>
              <Form.Item {...formItemLayout} label="开发">
                {getFieldDecorator('developer', {
                  rules: [{ required: false, message: '【开发】不能为空' }],
                })(
                  <UserSelect roleId={2} holder="请选择对应的开发同学" users={data.developer} disabled={formModalDisable}/>
                )}
              </Form.Item>
              <Form.Item {...formItemLayout} label="产品">
                {getFieldDecorator('pm', {
                  rules: [{ required: false, message: '【产品】不能为空' }],
                })(
                  <UserSelect roleId={1} holder="请选择对应的产品同学" users={data.pm} disabled={formModalDisable}/>
                )}
              </Form.Item>
              <Form.Item {...formItemLayout} label="钉钉机器人">
                {getFieldDecorator('ding', {
                  rules: [{ required: false, message: '' }],
                  initialValue: data.ding? data.ding:null
                })(
                  <Input placeholder="请填写钉钉机器人webhook" />
                )}
              </Form.Item>
              <FormItem label="项目描述">
                {getFieldDecorator('description', {
                  rules: [{ required: true, message: '请简要描述项目的主要功能和特性' }],
                  initialValue: data.description
                })(
                  <TextArea
                    style={{ width: 550 }}
                    autosize={{ minRows: 4 }}
                    placeholder="如：积木式编程和代码编程软件 => 基于Scratch 3.0 | 一键切换Python等代码语言"
                  />
                )}
              </FormItem>
            </Form>
          </Modal>
        );
      }
    }
  );